<template>
<div>
  <el-dialog title="编辑用戶" :visible.sync="editDialogIsShow" :before-close="handleClose" :close-on-click-modal="false">
    <el-form   label-width="120px"  ref="editAdminUploadForm">
      <!-- 代码中的1表示第几个 和引入js的type变量对应 -->
      <!-- action 就是原来普通form action也就是提交地址 所以对应方法返回后端正确的action请求地址-->
      <el-form-item label="头像">
        <el-upload
          class="upload"
          :action="getUploadUrl"
          list-type="picture-card"
          :limit="1"
          accept="image/*"
          :on-change="(file,fileList)=>{imgHandleChange(file,fileList,1,this,'editAdminUploadForm','head')}"
          :on-remove="(file,fileList)=>{imgHandleRemove(1,this)}"
          :on-before="(file,fileList)=>{imghandleBeforeUpload(file,1,this)}"
          :auto-upload="false"
          :file-list="fileList"
          ref="file1">
          <i class="el-icon-plus"></i>
        </el-upload>
<!--        <el-dialog :visible.sync="dialogVisible">-->
<!--          <img width="100%" :src="dialogImageUrl" alt="">-->
<!--        </el-dialog>-->
<!--       <viewer-dialog ref="viewer" :images="imagesUp"></viewer-dialog>-->
      </el-form-item>
    </el-form>

    <el-form :model="admin" :rules="addRules" ref="editFrom" label-width="80px">
    <el-col :span="6">&nbsp</el-col>
    <el-form-item label="姓名"  label-width="100px" prop="adname">
      <el-col :span="8">
      <el-input v-model="admin.adname" ></el-input>
      </el-col>
    </el-form-item>
    <el-col :span="6">&nbsp</el-col>
    <el-form-item label="别名" label-width="100px" prop="adnickname">
      <el-col :span="8">
      <el-input v-model="admin.adnickname"></el-input>
      </el-col>
    </el-form-item>
    <el-col :span="6">&nbsp</el-col>
    <el-form-item label="密码" label-width="100px" prop="adpassword">
      <el-col :span="8">
      <el-input v-model="admin.adpassword"></el-input>
      </el-col>
    </el-form-item>
    <el-col :span="6">&nbsp</el-col>
    <el-form-item label="确认密码" label-width="100px" prop="repassword">
      <el-col :span="8">
      <el-input v-model="admin.repassword"></el-input>
      </el-col>
    </el-form-item>
    <el-col :span="6">&nbsp</el-col>
    <el-form-item label="性别" label-width="100px">
      <el-col :span="6">
      <el-select v-model="admin.adsex" placeholder="请选择性别">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
      </el-col>
    </el-form-item>
    <el-col :span="6">&nbsp</el-col>
    <el-form-item label="电话号码" label-width="100px" prop="adphone">
      <el-col :span="8">
    <el-input v-model="admin.adphone"></el-input>
      </el-col>
  </el-form-item>
    <el-col :span="6">&nbsp</el-col>
    <el-form-item label="电子邮箱" label-width="100px" prop="email">
      <el-col :span="8">
      <el-input v-model="admin.email"></el-input>
      </el-col>
    </el-form-item>
    <el-col :span="8">&nbsp</el-col>
    <el-form-item>
      <el-col :span="8">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button>取消</el-button>
      </el-col>
    </el-form-item>
  </el-form>
  </el-dialog>
</div>
</template>

<script>
import api from "../../../../../axios/api.js"
import rules from "../../../../../static/js/validator/rules.js"
import utils from "../../../../../static/js/utils/upload.js"
export default {
  props:["editDialogIsShow"],
  name: "edit",
  data(){
    return {
      admin:{
        adid:"",
        adname:"",
        adpassword:"",
        repassword:"",
        adnickname:"",
        adhead:"1.jpeg",
        adsex:"",
        adphone:"",
        email:"",
        createtime:""
      },
      addRules: {
        adname: [
          {required: true, message: "姓名不能为空", trigger: 'blur'},
        ],
        adnickname: [
          {required: true, message: "别名不能为空", trigger: 'blur'},
        ],
        adpassword: [{required: true, message: "密码不能为空", trigger: 'blur'}, {
          validator:rules.FormValidate.Form().validatePsdReg,trigger:'change'
        }],
        repassword: [{required: true, message: "密码不能为空", trigger: 'blur'}, {
          validator:rules.FormValidate.Form().validatePsdReg,trigger:'change'
        }],
        adphone: [{required: true, message: "电话不能为空", trigger: 'blur'}, {
          validator:rules.FormValidate.Form().validatePhone,trigger:'change'
        }],
        email: [{required: true, message: "电子邮箱不能为空", trigger: 'blur'}, {
          validator:rules.FormValidate.Form().validateEmail,trigger:'change'
        }]
      },
      //上传使用
      fileList: [[],[],[]], //缓存区文件
      uploadFile:[[],[],[]], //  上传用文件
      formData:{files:[]},
      imagesUp:null,
      //上传使用结束
    }
  },
  methods:{
    getImgUrl: function (imgsrc) {
      return "../../../../../static/images/admin/upload/head/" + imgsrc;
    },
    onSubmit:function() {
      const _this = this;
      this.$refs['editFrom'].validate(valid => {//此处refs对象和标签上的ref对应
        if (valid) {
          api.setDataFromAxios("/api/administratorsController/editAdmin", this.admin, "post", null).then(
            dto => {
              this.$message.success(dto.msg);
              _this.$emit("closeEditDialog");
              _this.$emit("getAdminByPage");
            }
          )
        } else {
          this.$message.warning("请正确格式填写后提交");
          return
        }
      })
    },
    handleClose:function(){
      //给父组件传参
      this.fileList = [];
      this.uploadFile = [];
      //给父组件传参
      this.$emit("closeEditDialog");
    },
    initEditAdmin: function (admin){
      const _this = this;
      this.fileList = [];
      this.uploadFile =[];
      api.setDataFromAxios("/api/administratorsController/getAdminById/" + admin.adid,null,"get",null).then(
        //默认返回就是response对象
        dto=>{
          _this.admin = dto.t;
          //处理图片字段的地址 变成对应的file 对象 el-upload才能匹配显示
          if(this.admin.adhead!=null&&this.admin.adhead!=''){
            this.oldImg = true;
            let urls = this.admin.adhead.split(",");

            for (var i=0;i<urls.length;i++) {
              let fileObj = {};
              fileObj.name="file";
              console.log(this.getImgUrl(this.admin.adhead));
              fileObj.url = this.getImgUrl(this.admin.adhead);
              this.fileList.push(fileObj);
              console.log(this.fileList[0]);
            }

          }
        }
      );
    },
    //多文件上传
    imghandleBeforeUpload(file,type,vm) {
      return utils.UPLOAD.Upload().handleBeforeUpload(file,type,vm);
    },
    imgHandleChange(file, fileList, type,vm,modelName,name) {
      if(vm.fileList[type].attrs !== undefined && vm.fileList[type].attrs.length!=0){
        alert("请先删除再提交")
      }
      return utils.UPLOAD.Upload().handleChange(file, fileList, type,vm,modelName,name);
    },
    imgHandleRemove(type,vm) {

      return utils.UPLOAD.Upload().handleRemove( type,vm);
    },
    uploadImg:function(modelName,name){
      //  使用formdata格式
      let formData = new FormData();//准备一个空的表单对象
      formData.append("model",modelName);//图片上传子目录名放入表单对象
      console.log(formData);
      console.log(this.formData.files[name]);
      if (this.formData.files[name]) {
        formData.append("file", this.formData.files[name]);//文件放入表单对象
      }
      console.log("----------------------------");
      console.log(formData);
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      api.setDataFromAxios("/api/uploadController/upload",formData,"post",{headers: { "Content-Type": "multipart/form-data" }})
        .then(dto=>{
          if(dto.code==200){
            this.$message.success (dto.msg);
            console.log(this);
            this.admin.adhead = dto.tList[0];
            console.log( dto.tList[0]);
            console.log(this.admin);
          }else{
            this.$message.error (dto.msg);
          }
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
    }
  },
  computed:{
    getUploadUrl(){
      return      "/api/uploadController/upload";
    }
  }
}
</script>

<style scoped>

</style>
